<template>
  <div>
    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="form-item">
            <span class="title">电话号</span>
            <el-input placeholder="请输入手机号" v-model.number="param.tbCustomer.mobile"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item">
            <span class="title">微信昵称</span>
            <el-input placeholder="请输入微信昵称" v-model="param.tbCustomer.wechatNick"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item">
            <span class="title">注册日期</span>
            <el-date-picker
              v-model="dateList"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item button-container">
            <el-button type="primary" @click="searchCustomer" icon="el-icon-search">查询</el-button>
            <el-button type="primary" @click="resetSearchCotnet" icon="el-icon-refresh">重置</el-button>
          </div>
        </el-col>
        <!-- <el-col :span="6">
                    <div class="form-item">
                        <span class="title">上级代理</span>
                        <el-select v-model="param.tbCustomer.parentId"
                                   style="width:100%"
                                   placeholder="请选择">
                            <el-option v-for="item in delegeList"
                                       :key="item.id"
                                       :label="item.name"
                                       :value="item.customerId">
                            </el-option>
                        </el-select>
                    </div>

        </el-col>-->
        <!-- <el-col :span="6">
                    <div class="form-item">
                        <span class="title">是否是代理</span>
                        <el-select v-model="param.tbCustomer.isAgent"
                                   style="width:100%"
                                   placeholder="请选择">
                            <el-option label="是"
                                       :value="1">
                            </el-option>
                            <el-option label="否"
                                       :value="0">
                            </el-option>
                        </el-select>
                    </div>
        </el-col>-->
      </el-row>
    </div>
    <div class="table-body">
      <el-table :data="table.data" border v-loading="isLoading" style="width: 100%">
        <el-table-column prop="createTime" label="注册时间"></el-table-column>
        <el-table-column prop="wechatNick" label="微信昵称"></el-table-column>
        <el-table-column prop="headPic" label="微信头像">
          <template slot-scope="scope">
            <template>
              <el-image class="header-image" fit="cover" :src="scope.row.headPic"></el-image>
              <div v-show="!scope.row.disabled"></div>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="微信手机号"></el-table-column>
        <!-- <el-table-column prop="isAgent"
                                 label="是否为代理"
                                 :formatter="(row) => { return row.isAgent == 1 ? '是' : '否' }">
        </el-table-column>-->
        <el-table-column prop="orderNum" label="订单数"></el-table-column>
        <!-- <el-table-column prop="scort"
                                 label="钻石结余">
                    <template slot-scope="scope">
                        <template>
                            <div>{{scope.row.scort || '-' }}</div>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="parentName"
                                 label="上级代理">
                    <template slot-scope="scope">
                        <template>
                            <div>{{scope.row.name || '-' }}</div>
                        </template>
                    </template>
        </el-table-column>-->
        <el-table-column
          fixed="right"
          label="操作"
          v-if="isPermissionsBtn('customer_detail')"
          width="120"
        >
          <template slot-scope="scope">
            <el-button @click="handleCutomerClick(scope.row)" type="primary" size="small">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @current-change="currentPageChange"
          layout="prev, pager, next"
          :total="table.totalCount"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      delegeList: [], //已审核代理集合
      isLoading: true,
      param: {
        tbCustomer: {
          mobile: "", // 电话
          wechatNick: "", //昵称
          isAgent: "", //是否是代理 0.false，1为true
          parentId: "", //上级代理
          startTime: "", //注册日期开始时间
          endTime: "" // 注册日期结束时间
        },
        queryRequest: {
          pageNum: 1,
          pageSize: 10
        }
      },
      dateList: [],
      table: {
        data: [],
        totalCount: 0
      }
    };
  },
  mounted() {
    this.initData();
    // this.getDelegeteList();
  },
  computed: {
    ...mapGetters(["isPermissionsBtn"])
  },
  methods: {
    getDelegeteList() {
      this.$service
        .getDelegeteList({
          tbAgent: {
            phone: "",
            wechatNick: "",
            levelId: "",
            appStu: "1"
          },
          queryRequest: {
            pageSize: 100,
            pageNum: 1
          }
        })
        .then(res => {
          this.delegeList = res.data.rows;
        });
    },

    initData() {
      this.isLoading = true;
      if (this.dateList.length > 0) {
        this.param.tbCustomer.startTime = this.dateList[0];
        this.param.tbCustomer.endTime = this.dateList[1];
      }
      this.$service.getCustomerList(this.param).then(res => {
        this.isLoading = false;
        if (res.code == "00000") {
          if (
            res.data.rows.length == 0 &&
            this.param.queryRequest.pageNum != 1
          ) {
            this.param.queryRequest.pageNum -= 1;
            this.initData();
          }
          this.table.data = (res.data && res.data.rows) || [];
          this.table.totalCount = res.data.total || 0;
        }
      });
    },
    searchCustomer() {
      this.param.queryRequest.pageNum = 1;
      this.initData();
    },
    resetSearchCotnet() {
      //重置搜索条件
      this.param.tbCustomer.mobile = "";
      this.param.tbCustomer.wechatNick = "";
      this.param.tbCustomer.parentId = "";
      this.param.tbCustomer.isAgent = "";
      this.param.tbCustomer.startTime = "";
      this.param.tbCustomer.endTime = "";
      this.dateList = [];
      this.initData();
    },
    currentPageChange(e) {
      this.param.queryRequest.pageNum = e;
      this.initData();
    },
    handleCutomerClick(e) {
      this.$router.push({ path: "/customerDetail", query: { id: e.id } });
    }
  }
};
</script>

<style lang="scss">
.header-image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: 14px;
}

.form-item {
  width: 100%;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    font-size: 14px;
    color: #909399;
    font-weight: 500;
    white-space: nowrap;
    min-width: 80px;
  }
  .el-input {
    flex: 1;
  }
}

.button-container {
  justify-content: flex-start;
}
</style>